<template>
  <van-tabs class="right" v-model:active="topBarCurrent">
    <van-tab v-for="item of topList" :key="item.id" :title="item.mallSubName">
      <listItem></listItem>
    </van-tab>
  </van-tabs>
</template>
<script setup>
import { ref, onMounted, watchEffect } from "vue";
import listItem from "./listItem.vue";
import { useLeftBar } from "../utils/useLeftBar.js";
import { useTopBar } from "../utils/useTopBar.js";

const props = defineProps({
  leftBarCurrent: {
    type: Number,
  },
});

const topBarCurrent = ref(0); //顶部导航栏索引值
const topList = ref([]); //顶部列表

watchEffect(async () => {
  let current = props.leftBarCurrent;
  let { leftBarList } = await useLeftBar();
  let { topBarList } = await useTopBar(leftBarList, current);

  topList.value = topBarList.value;
});
</script>
